//获取节点
let main = document.querySelector(".box");
let imgBox = document.querySelector(".img_box");
let dotBox = document.querySelector(".dot_box");
//创建ul节点
let imgBoxUl = document.createElement("ul");
let resultArr = [];

//创建一个ajax
//首先new一个XMLHttpRequest对象；
let xhr = new XMLHttpRequest();
//设置格式
let data = {
  "type":"图片"
}
//其次设置请求方式和地址
xhr.open("POST","http://studentback.dfbuff.xyz/postMethod");

//设置头请求
//提交数据格式为json格式
xhr.setRequestHeader("Content-Type","application/json")

//再次，发送请求
xhr.send(JSON.stringify(data));//把json字符串转换为
//最后，设置监听事件
xhr.addEventListener("readystatechange",function() {
  //状态值等于4，表示获取全部数据
  if (xhr.readyState == 4) {
    //状态码等于2，表示请求成功
    if(xhr.status == 200) {
      resultArr = JSON.parse(xhr.responseText).result;//获取json对象里的result数组
      console.log(resultArr);

      let arr = [];
      //获取存储的数据
      resultArr.forEach(function(item){
        // console.log(item.content);//获取所有的图片地址
        //设置存储的数据
        localStorage.setItem("src",`${item.content}`);
        
        //获取本地存储的数据
       let getLocal = localStorage.getItem("src");
        console.log(getLocal);
        arr.push(`${getLocal}`);
      })
      console.log(arr);




      
      //遍历数组
      resultArr.forEach(function(item,idx){
        // console.log(item.content);//获取每张图片的url地址
        imgBoxUl.innerHTML += `
        <li>
        <img src="${item.content}">
        </li>
        `
        imgBox.appendChild(imgBoxUl);

      // console.log(resultArr.length);//数组长度为4
      //设置小圆点,小圆点的长度要和图片的长度相等
      // console.log(dotBox.children.length);
      // console.log(resultArr.length);
      if(dotBox.children.length < resultArr.length) {
        let newSpan = document.createElement("span");
        newSpan.style.class = "dot";
        newSpan.style.dataIndex = `${idx + 1}`;
        dotBox.appendChild(newSpan);
        dotBox.children[0].classList.add("dotActive");
      }
      })   
      
      // console.log(imgBoxUl.firstElementChild);
      //将第一张图片插入最后面
      imgBoxUl.appendChild(imgBoxUl.firstElementChild.cloneNode(true));
      //将最后一张图片插入第一张前面
      imgBoxUl.insertBefore(imgBoxUl.children[imgBoxUl.children.length - 2].cloneNode(true), imgBoxUl.firstElementChild);
      // console.log(imgBoxUl.children.length);

    }
  }
})

  // // // console.log(imgBoxUl.firstElementChild);
  // //将第一张图片插入最后面
  // imgBoxUl.appendChild(imgBoxUl.firstElementChild.cloneNode(true));//
  // //将最后一张图片插入第一张前面
  // imgBoxUl.insertBefore(imgBoxUl.children[imgBoxUl.children.length - 2].cloneNode(true), imgBoxUl.firstElementChild);
  // // console.log(imgBoxUl.children.length)


//事件委托，给父元素盒子设置事件
let index = 1;
let lastIndex = 1;
imgBoxUl.style.transform = `translateX(-${index}00%)`;//当index=1时，图片在-100%的位置

//事件代理
main.addEventListener("click",function(event) {
  //当点击右箭头的时候，图片移动
  if(event.target.className == "arrow_right") {
    arrowRfn(event);//为什么这里可以event.target
  }
  //当点击左箭头的时候，图片移动
  if(event.target.className == "arrow_left") {
    arrowLfn(event);//这里event.target却要报错
  }
  //当点击小圆点的时候，图片移动
  if(event.target.classList.contains("dot")) {
    dotfn(event);
  }

})

//右点击事件
function arrowRfn(e) {
  // console.log(e);
  // console.log(e.target);
  index++;
  imgBoxUl.style.transform = `translateX(-${index}00%)`;
  //当index=5的时候，让它直接跳转到第一张，但是不能有过渡动画，然后下一次点击的时候就是第二张
  if(index == 5) {
    // console.log(index);
    index=1;
    limit();
  }

  let dotR = e.target.parentElement.nextElementSibling.children[index - 1];
  // console.log(dotR);
  dotColor(dotR)
}

//临界值
function limit() {

    //设置一个监听事件，监听动画结束之后，应该要做什么
    imgBoxUl.addEventListener("transitionend", function(){
      //当最后一张的动画效果结束之后，清除动画。目的：为了不让返回第一张的时候，呈现动画效果
      imgBoxUl.style.transition = "none";
      // 让图片返回第一张，-100%的位置
      imgBoxUl.style.transform = `translateX(-${index*100}%)`;
      
      //当回到第一张之后，恢复动画值
      window.getComputedStyle(imgBoxUl,"style").transition;//获取transition的最终值，只有获取了这个值之后，
                                                            //在下面再设置transition才不会覆盖上面的值。
      // console.log(window.getComputedStyle(imgBoxUl,"style").transition);
      // console.log(imgBoxUl.style.transition);
      imgBoxUl.style.transition = "0.2s ease-in-out";
  })
  
}

//左点击事件
function arrowLfn(e) {
  // console.log(e);
  // console.log(e.target);
  index--;
  imgBoxUl.style.transform = `translateX(-${index}00%)`;
  if(index == 0){
    index=4;
    limit();
  }
  let dotL = e.target.parentElement.nextElementSibling.children[index - 1];
  // console.log(dotL);
  // console.log(e);
  dotColor(dotL)
}

//小圆点事件
function dotfn(e) {
  // console.log(e)
// let dataIndex = e.target.getAttribute("data-index");
let dataIndex = e.target.dataset.index
// console.log(dataIndex);
index = dataIndex;
imgBoxUl.style.transform = `translateX(-${index}00%)`;
dotColor(e)
}

//小圆点颜色
function dotColor(e) {
  // console.log(e.target);
  e.parentElement.children[lastIndex - 1].classList.remove("dotActive");
  // console.log(e.target.parentElement[0]);
  e.classList.add("dotActive");
  lastIndex = index;
}







































// //创建一个ajax,获取后台数据
// //首先创建XMLHttpRequest对象
// let xhr = new XMLHttpRequest();
// //设置数据格式
// let data = {
//   "type":"图片"
// }
// //设置请求方式metho和请求地址url
// xhr.open("POST","http://studentback.dfbuff.xyz/postMethod");
// //发送请求
// xhr.send(JSON.stringify(data));//把数据转换成JSON字符串格式

// //设置一个监听事件实时监听数据状态
// xhr.addEventListener("readystatechange",function(){
//   //如果状态值等于4表示请求获取全部数据
//   if(xhr.readyState == 4){
//     //如果状态码等于200，表示请求成功
//     if(xhr.status == 200){
//       console.log(JSON.parse(xhr.responseText));
//     }
//   }
// })